<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<script src="js/plugin/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/plugin/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="js/plugin/jquery.textarea-expander.js"
	type="text/javascript"></script>
<script src="js/hnl-fileupload.js" type="text/javascript"></script>
<script src="js/hnl-education.js" type="text/javascript"></script>
<script src="js/plugin/jquery.filter_input.js" type="text/javascript"></script>
<link href="css/jquery/jquery.fileupload-ui.css" rel="stylesheet"></link>

<style>
div.file_upload {
	background: #FFF8C6;
	border: 1px solid #FFF8C6;
}
</style>
<script>
var tid = getFromAttribute(${param.talentID});

	$(document).ready(function() {
		//destroyHNLTabDialogs();						
		initEducation();
		loadCareerInfoForm();
		
		var saveTalentBtn=$("#addCareerInfo");
	
		$("#yearsOfWork").filter_input({regex:'[0-9]'}); 
		/*Button Action*/	
		$("#backToMain1").click(function(evt) {
					evt.preventDefault();		
					window.top.location.href = "dashboard.jsp";					
				});
				
		saveTalentBtn.click(function(evt) {
			evt.preventDefault();
			saveTalentBtn.attr("disabled",true);
			joinInfoForms("#personalInfo","#careerInfo");
			$("#careerInfo").attr("action", "/hnl/AddTalent.do?talentID="+tid+"&tabID=1");
			$("#careerInfo").attr("method", "post");
			$("#careerInfo").submit();
		});
		
		    initFileUpload(1, tid);
		    initFileUpload(2, tid);
		    initFileUpload(3, tid);

		    initOtherFileUpload(tid);
		    
	});
	
function loadCareerInfoForm() {
	$.getJSON("/hnl/LoadTalentInfo.do?talentID="+tid, function(data) {
   		$("#currentCompany").val(data.company);
   		$("#city").val(data.city);
   		$("#position").val(data.position);
   		$("#jobFunction").val(data.jobfunction);
   		$("#salary").val(data.salary);
   		$("#yearsOfWork").val(data.totalYearsOfWork);
   		$("#workExperience").val(data.workExperience);
   		$("#expertise").val(data.expertise);
   		$("#careerGoal").val(data.careerGoal);
   		$("#lanSkill").val(data.languageSkill);
   		$("#comment").val(data.comment);
   		   		
   		/* Dropdown list */
   		$.getJSON("/hnl/PopulateDropdown.do?typeName=CURRENT_COUNTRY",
				function(dropdowndata) {
					setdropdown(dropdowndata, "#workCountry", data.country);
				});
		
		$.getJSON("/hnl/PopulateDropdown.do?typeName=INDUSTRY_LEVEL_1",
				function(dropdowndata) {
					setdropdown(dropdowndata, "#industry1", data.industry1);
				});
		$.getJSON("/hnl/PopulateDropdown.do?typeName=INDUSTRY_LEVEL_2",
				function(dropdowndata) {
					setdropdown(dropdowndata, "#industry2", data.industry2);
				});
    })
}
</script>

</head>
<body>
	<form id="careerInfo" accept-charset="UTF-8" >
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Career Info</legend>
			<table class="fourColumn talentForm" >
				<tbody>
					<tr>
						<td class="oddCol">Current Company</td>
						<td class="evenCol"><input type="text" name="currentCompany"
							id="currentCompany" maxlength="200" />
						</td>  
						<td class="oddCol Column_Text_Align">Industry</td>
						<td class="evenCol"><select name="industry1" id="industry1"></select>
							<select name="industry2" id="industry2" style="display: none"></select>
						</td>
					</tr>
					<tr>
						<td>Work Country</td>
						<td><select id="workCountry" name="workCountry" />
						</td>
						<td class="Column_Text_Align">Work City</td>
						<td><input type="text" id="city" name="city" maxlength="200" />
						</td>
					</tr>
					<tr>
						<td>Position</td>
						<td><input type="text" id="position" name="position"
							maxlength="200" />
						</td>
						<td class="Column_Text_Align">Job Function</td>
						<td><textarea type="text" id="jobFunction" name="jobFunction"
								class="expand25-80"></textarea>
						</td>
					</tr>
					<tr>
						<td>Current Salary</td>
						<td><input type="text" name="salary" id="salary"
							maxlength="100" /></td>
						<td colspan="2"></td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Expertise</legend>
			<table class="twoColumn talentForm">
				<tbody>
					<tr>
						<td class="firstCol">Expertise</td>
						<td class="secondCol"><textarea type="text" id="expertise"
								name="expertise" class="expand25-80"></textarea>
						</td>
					</tr>
					<tr>
						<td>Language Skills</td>
						<td><textarea type="text" id="lanSkill" name="lanSkill"
								class="expand25-80"></textarea>
						</td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Education / Certificate /
				Training</legend>
			<div>
				<img id="addEducation" src="./images/add.png"></img>&nbsp;&nbsp; <img
					id="delEducation" src="./images/del.png"></img>
			</div>
			<div id="educationTb"></div>
		</fieldset>
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Work Experience</legend>
			<table class="twoColumn talentForm">
				<tbody>
					<tr>
						<td class="firstCol">Total Years of Work</td>
						<td class="secondCol"><input type="text" id="yearsOfWork"
							name="yearsOfWork" /></td>
					</tr>
					<tr>
						<td>Work Experience</td>
						<td><textarea type="text" id="workExperience"
								name="workExperience" class="expand25-80"></textarea>
						</td>
					</tr>
				</tbody>
			</table>
		</fieldset>		
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Career Goal</legend>
			<table class="twoColumn talentForm">
				<tbody>
					<tr>
						<td class="firstCol">Career Goal</td>
						<td class="secondCol"><textarea type="text" id="careerGoal"
								name="careerGoal" class="expand25-80"></textarea>
						</td>
					</tr>
				</tbody>
			</table>
		</fieldset>		
		<fieldset class="mainFieldSet">
			<legend class="mainLegend">Other Career Info</legend>
			<table class="twoColumn talentForm">
				<tbody>
					<tr>
						<td class="firstCol">Additional Comments</td>
						<td class="secondCol"><textarea type="text" id="comment"
								name="comment" class="expand25-80"></textarea></td>
					</tr>
				</tbody>
			</table>
		</fieldset>
	</form>

	<fieldset class="mainFieldSet">
		<legend class="mainLegend">Upload Documents</legend>
		<form id="file_upload"
			action="${pageContext.request.contextPath}/FileUpload.do"
			method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
			<div id="drop_zone_1" class="uploadBtn">
				Original Resume<input type="file" id="file_1" name="Original">
			</div>
			<table id="files_1" style="background: yellow;"></table>
			<br />
			<div id="drop_zone_2">
				Shortlist Resume <input type="file" id="file_2" name="Shortlist"></input>
			</div>
			<table id="files_2" style="background: gold;"></table>
			<br />
			<div id="drop_zone_3">
				Reference Report<input type="file" id="file_3"
					name="ReferenceReport"></input>
			</div>
			<table id="files_3" style="background: orange;"></table>
			<br /> <input type="hidden" id="talentID" name="talentID"
				value="${param.talentID}" />
		</form>

		<fieldset class="subFieldSet">
			<legend class="subLegend">Other Documents</legend>
			<form id="other_file_upload"
				action="${pageContext.request.contextPath}/FileUpload.do"
				method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
				<div id="other_files_drop_zone">
					<img id="addDoc" src="./images/add.png"></img>&nbsp;&nbsp; <input
						type="file" id="otherfiles" name="otherfiles">
				</div>
				<table id="otherfiles_table" style="background: yellow;"></table>
				<input type="hidden" id="talentID" name="talentID"
					value="${param.talentID}" />
			</form>
			<div id="docTb"></div>
		</fieldset>
	</fieldset>
	<br />
	<div>
		<input type="button" id="addCareerInfo" value="Update" /> <input
			type="button" id="backToMain1" value="Back to Main" />
	</div>

	<div id="dialog-education"
		title="Add Education / Certificate / Training">
		<form id="eduForm" class="talentForm">
			<fieldset class="mainFieldSet">
				<table class="dialogEducation PopupDialog">
					<tbody>
						<tr>
							<td class="firstCol">Degree/Certificate/Training <em>*</em>
							</td>
							<td class="secondCol"><input type="text" name="degree"
								id="degree" maxlength="50" /></td>
						</tr>
						<tr>
							<td>School/Description <em>*</em>
							</td>
							<td><input type="text" name="school" id="school"
								maxlength="200" /></td>
						</tr>
						<tr>
							<td>Major</td>
							<td><input type="text" name="major" id="major"
								maxlength="50" /></td>
						</tr>
						<tr>
							<td>Duration</td>
							<td><input type="text" name="duration" id="duration"
								maxlength="50" />
							</td>
						</tr>
					</tbody>
				</table>
				<input type="hidden" id="educationID" name="educationID" />
			</fieldset>
		</form>
	</div>
	<!-- Delete dialog -->
	<div id="dialog-deleteEducation" title="Delete Education Message">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Do you really want
			to delete document(s) from the database?
		</p>
	</div>
	<div id="dialog-no-education-selected" title="Message">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>No education
			record(s) selected.
		</p>
	</div>
	<div id="dialog-education-fields-required"
		title="Missing Required Fields">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Degree and
			Description fileds are required.
		</p>
	</div>
</body>
</html>
